<template>
    <el-menu :default-active="String(routersindex)" class="el-menu-demo" mode="horizontal" style="height: 45px;background-color:rgba(0,0,0,0)" @select="handleSelect">
    <el-menu-item class="el-menu-demo aa" v-for="(item,i) in menu" :key="i" :index="item.id.toString()" >{{item.title}}</el-menu-item>
    </el-menu>
</template>

<script>

import { mapGetters } from 'vuex'
  export default {
    name:"NavMenu",
    data() {
      return {
        menu_data: {},
        second_menu: {},
        activeIndex: '1',
      };
    },
      computed: {
        ...mapGetters([
          'routers',
          'routersindex',
          'menu',
        ]),
    },
    mounted(){
      
        // this.menu_data = JSON.parse(localStorage.getItem("main_menu"));

        this.activeIndex =String(this.routersindex)
    },
    methods: {
      handleSelect(index, keyPath) {
        if(index !=this.routersindex){
          this.$store.dispatch('user/set_routers_index', index)
          localStorage.setItem("menuindex", Number(index))
        }
      },
    }
  }
</script>

<style scoped>
.el-menu-demo{
      float: left;
    height: 39px;
    line-height: 45px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
    font-size: 15px;
}
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #409EFF;
    color: #409EFF;
}
@media (max-width:550px) {
  .el-menu-item{
    padding-left: 10px;
    padding-right: 10px;

  }

}

</style>